<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Add graphic content</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<f:view>
    <f:loadBundle basename="ResourceBundle" var="bundle"/>
    <div style="position:absolute;top:10%; left:30%; height:552px; width: 960px;  background-color:#0e73fc; outline-color: red;"
         align="center">
        <h:form id="addGraphicContentForm">
            <div style="position: absolute; top: 1%; left: 10%;">
                <h:outputText value="N  #{graphicContentBean.contentId}"
                              style=" width: 40px;background-color:#e8e7e9;"/>
            </div>
            <div style="position:absolute;top: 5%;left: 1%; width: 200px; height: 100px">
                <h:graphicImage value="i/src/cont1.png"/>
            </div>
            <div style="position:absolute;top:47%; left:1%; width: 32%; height: 45%;background-color: #e8e7e9;">

                <h:outputText value="#{bundle.delay_time}" styleClass="labels" style="top:5px"/>
                <h:inputText value="#{graphicContentBean.delayTime}" styleClass="fields" style="top:5px"/>
                <br>
                <br>
                <h:outputText value="#{bundle.declare_budget}" styleClass="labels"/>
                <h:inputText value="#{graphicContentBean.newGraphicContentBudget}" styleClass="fields"/>

                <br>
                <br>
                <h:outputText value="#{bundle.declareViewingCost}" styleClass="labels"/>
                <h:inputText value="#{graphicContentBean.newContentViewingCost}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentStatus}" styleClass="labels"/>
                <h:inputText readonly="true" value="#{graphicContentBean.graphicContentStatus}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentCategory}" styleClass="labels"/>
                <h:selectOneMenu value="#{graphicContentBean.chosenCategoryId}" styleClass="fields">
                    <f:selectItems value="#{graphicContentBean.categories}"/>
                </h:selectOneMenu>
                <br>
                <br>
                <h:outputText value="#{bundle.advertiserSite}" styleClass="labels"/>
                <h:inputText value="#{graphicContentBean.advertiserSite}" styleClass="fields"/>
                <br>
                <br>
            </div>

            <div id="right-add-audio-content">
                <div style="position:absolute;top:1%;left:1%;width: 80%;height: 40%;">
                    <h:outputText value="#{bundle.newContentName}" styleClass="labels"/>
                    <h:inputText value="#{graphicContentBean.newContentName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.newAdvertiserName}" styleClass="labels"/>
                    <h:inputText value="#{graphicContentBean.newAdvertiserName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.textDescription}" styleClass="labels"/>
                    <br>
                    <h:inputTextarea value="#{graphicContentBean.description}" rows="5" style="width: 96%"/>
                </div>
                <div style="position:absolute;top:1%;right:0%;width: 18%;height: 40%; text-align: center;background-color: #e8e7e9">
                    <div style="position: absolute; top: 1%; right: 1%; background-color: #7ccff5">
                        <strong>
                            <h:outputText value="Language of "/>
                            <br>
                            <h:outputText value="uploadable content"/>
                            <br>
                            <h:commandLink value="EN"/>
                            <h:commandLink value="HI"/>
                            <h:commandLink value="TAM"/>
                        </strong>
                    </div>
                </div>
                <div id="new-content-groups">
                    <h:outputText value="#{bundle.chooseAvailableGroups}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{graphicContentBean.chosenGroups}" layout="pageDirection">
                            <f:selectItems value="#{graphicContentBean.groups}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{graphicContentBean.checkAllGroups}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{graphicContentBean.clearAllGroups}"/>
                    </div>
                </div>
                <div id="new-content-regions">
                    <h:outputText value="#{bundle.chooseAvailableRegions}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{graphicContentBean.chosenRegions}" layout="pageDirection">
                            <f:selectItems value="#{graphicContentBean.regions}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{graphicContentBean.checkAllRegions}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{graphicContentBean.clearAllRegions}"/>
                    </div>
                </div>
            </div>
            <div style="position: absolute;bottom: 1%; right: 1%">
                <h:commandButton value="#{bundle.uploadContentButton}" action="#{graphicContentBean.toGraphicContent}"/>
                <h:commandButton value="#{bundle.cancelButton}" action="#{graphicContentBean.backToGraphicsContent}"/>
            </div>
        </h:form>
    </div>
</f:view>
</body>
</html>